<template>
	<char-base @change="change" :options="chartOptions" class="chartline"></char-base>
</template>

<script>
	import charBase from '../chart/chart-base'
	import { getColorList,getxAxis,getSeriesStyle,getChartGrid } from '../chart/chart-config'
	export default {
		name: 'wioc-chart-circle',
		components: {
			charBase
		},
		props: ['componentParams'],
		data() {
			return {
				chartOrigin:{
					columns: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					list:[{
						"name":"线上办理",
						"data":[120, 132, 101, 134, 190, 230, 210, 220, 182, 191, 234, 290]
					},{
						"name":"行政服务中心",
						"data":[220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 190]
					},{
						"name":"13个街道镇社区",
						"data":[320, 332, 301, 190, 330, 410, 290, 330, 310, 334, 390, 330],
					}]
				},
				chartOptions:{}
			}
		},
		mounted(){
			this.setChartOptions(this.chartOrigin)
		},
		watch:{
			"dynamicDataResult": {
				handler() {
					this.setChartOptions(this.dynamicDataResult.data)
				},
				deep: true
			},
			"componentParams": {
				handler() {
					this.getDynamicData()
				},
				deep: true
			}
		},
		methods:{
			change(params){
				this.$emit("change",params)
			},
			setChartOptions(renderData){
				let data = [{
				        name: "0-10分钟",
				        value: 754
				    },
				    {
				        name: "10-20分钟",
				        value: 611
				    },
				    {
				        name: "20-30分钟",
				        value: 400
				    },
				    {
				        name: "30分钟以上",
				        value: 200
				    }
				];
				let arrName = getArrayValue(data, "name");
				let arrValue = getArrayValue(data, "value");
				let sumValue = eval(arrValue.join('+'));
				let objData = array2obj(data, "name");
				let optionData = getData(data)
				function getArrayValue(array, key) {
				    var key = key || "value";
				    var res = [];
				    if (array) {
				        array.forEach(function(t) {
				            res.push(t[key]);
				        });
				    }
				    return res;
				}
				
				function array2obj(array,key) {
					var resObj = {};
					for(var i=0;i<array.length;i++){
						resObj[array[i][key]] = array[i];
					}
					return resObj;
				}
				
				function getData(data) {
				    var res = {
				        series: [],
				        yAxis: []
				    };
				    for (let i = 0; i < data.length; i++) {
				        // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
				        res.series.push({
				            name: '',
				            type: 'pie',
				            clockWise: false, //顺时加载
				            hoverAnimation: false, //鼠标移入变大
				            radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
				            center: ["30%", "55%"],
				            label: {
				                show: false
				            },
				            itemStyle: {
				                label: {
				                    show: false,
				                },
				                labelLine: {
				                    show: false
				                },
				                borderWidth: 5,
				            },
				            data: [{
				                value: data[i].value,
				                name: data[i].name
				            }, {
				                value: sumValue - data[i].value,
				                name: '',
				                itemStyle: {
				                    color: "rgba(0,0,0,0)",
				                    borderWidth: 0
				                },
				                tooltip: {
				                    show: false
				                },
				                hoverAnimation: false
				            }]
				        });
				        res.series.push({
				            name: '',
				            type: 'pie',
				            silent: true,
				            z: 1,
				            clockWise: false, //顺时加载
				            hoverAnimation: false, //鼠标移入变大
				            radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
				            center: ["30%", "55%"],
				            label: {
				                show: false
				            },
				            itemStyle: {
				                label: {
				                    show: false,
				                },
				                labelLine: {
				                    show: false
				                },
				                borderWidth: 5,
				            },
				            data: [{
				                value: 7.5,
				                itemStyle: {
				                    color: "rgb(3, 31, 62)",
				                    borderWidth: 0
				                },
				                tooltip: {
				                    show: false
				                },
				                hoverAnimation: false
				            }, {
				                value: 2.5,
				                name: '',
				                itemStyle: {
				                    color: "rgba(0,0,0,0)",
				                    borderWidth: 0
				                },
				                tooltip: {
				                    show: false
				                },
				                hoverAnimation: false
				            }]
				        });
				        res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
				    }
				    return res;
				}
				
				let option = {
				    legend: {
				        show: true,
				        icon:"circle",
				        top: "center",
				        left: '70%',
				        data: arrName,
				        width:50,
				        padding: [0, 5],
				        itemGap: 25,
				        formatter: function(name) {
				            return "{title|" + name + "}\n{value|" + (objData[name].value) +"}  {title|项}"
				        },
				       
				        textStyle: {
				            rich: {
				                title: {
				                    fontSize: 30,
				                    lineHeight: 50,
				                    color: "rgb(0, 178, 246)"
				                },
				                value: {
				                    fontSize: 30,
				                    lineHeight: 50,
				                    color: "#fff"
				                }
				            }
				        },
				    },
				    tooltip: {
				        show: true,
				        trigger: "item",
				        formatter: "{a}<br>{b}:{c}({d}%)"
				    },
				    color: ['rgb(24, 183, 142)', 'rgb(1, 179, 238)', 'rgb(22, 75, 205)', 'rgb(52, 52, 176)'],
				    grid: {
				        top: '16%',
				        bottom: '53%',
				        left: "30%",
				        containLabel: false
				    },
				    yAxis: [{
				        type: 'category',
				        inverse: true,
				        axisLine: {
				            show: false
				        },
				        axisTick: {
				            show: false
				        },
				        axisLabel: {
				            interval: 0,
				            inside: true,
				            textStyle: {
				                color: "#fff",
				                fontSize: 26,
				            },
				            show: true
				        },
				        data: optionData.yAxis
				    }],
				    xAxis: [{
				        show: false
				    }],
				    series: optionData.series
				};
				this.chartOptions = option
			}
		}
	}
</script>
<style lang="less" scoped="scoped">
    .chartline {
        width: 100%;
        height: 524px;
    }
</style>
